<!-- Cândida's Script 11-10-2011 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title class="titleStyle"> Staphylococcus aureus Database - Toxins Query Form </title>

<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/tableSorter.js"></script>
<script type="text/javascript" src="js/tableFilter.js"></script>
<script type="text/javascript" src="js/table2CSV.js"></script> 


<link href="style/CSSmenu.css" rel="stylesheet" type="text/css" media="screen">
<link href="style/table.css" rel="stylesheet" type="text/css" media="screen">
<link href="style/style.css" rel="stylesheet" type="text/css" media="screen">

<style type="text/css" media="screen">

#loading{
	margin:0;
	padding: 0;
  z-index: -1;
	width: 900px;
	height: 200px;
	border: 1px solid gray;
	background: url(images/ajax-loader.gif)no-repeat center center;
}
</style>

<script type="text/javascript">

 var variavel = location.search.split("?");
 var variavel1 = variavel[1].split("=");
 var key = variavel1[1];

function toggle1(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
                imageEle.innerHTML = '<img src="images/plus_sign_grey.png">';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="images/minus_sign_grey.png">';
        }
}

function toggle2(contentDiv, controlDiv) {
        if (contentDiv.constructor == Array) {
                for(i=0; i < contentDiv.length; i++) {
                     toggle1(contentDiv[i], controlDiv[i]);
                }
        }
        else {
               toggle1(contentDiv, controlDiv);
        }
}

$(document).ready(function(){

 $('img').bind('click', function (evt) 
  {        
   if($(this).attr('id') == 'img1')
    {
     var query="http://204.232.200.16/s3db2/sparql.php?key="+key+"&query=SELECT ?Isolate ?enterotoxin WHERE {?itqbisolate :R167340 ?IMT .?IMT :R173107 ?enterotoxin .?itqbisolate rdfs:label ?Isolate }&format=json&callback=?";
     formataColuna(query);
    } 
    if($(this).attr('id') == 'img2')
     {
      var query="http://204.232.200.16/s3db2/sparql.php?key="+key+"&query=SELECT ?Isolate ?exfoliatin WHERE {?itqbisolate :R167340 ?IMT .?IMT :R116873 ?exfoliatin .?itqbisolate rdfs:label ?Isolate }&format=json&callback=?";
      formataColuna(query);
     } 
     if($(this).attr('id') == 'img3')
      {
       var query="http://204.232.200.16/s3db2/sparql.php?key="+key+"&query=SELECT ?Isolate ?hemolysin WHERE {?itqbisolate :R167340 ?IMT .?IMT :R116871 ?hemolysin .?itqbisolate rdfs:label ?Isolate }&format=json&callback=?";
       formataColuna(query);
      }
	  if($(this).attr('id') == 'img4')
      {
       var query="http://204.232.200.16/s3db2/sparql.php?key="+key+"&query=SELECT ?Isolate ?leukotoxin WHERE {?itqbisolate :R167340 ?IMT .?IMT :R173147 ?leukotoxin .?itqbisolate rdfs:label ?Isolate }&format=json&callback=?";
       formataColuna(query);
      }
	   if($(this).attr('id') == 'img5')
      {
       var query="http://204.232.200.16/s3db2/sparql.php?key="+key+"&query=SELECT ?Isolate ?enterotoxin ?exfoliatin ?hemolysin ?leukotoxin WHERE {?itqbisolate :R167340 ?IMT . OPTIONAL {?IMT :R173107 ?enterotoxin . } OPTIONAL {?IMT :R116873 ?exfoliatin . } OPTIONAL {?IMT :R116871 ?hemolysin . } OPTIONAL {?IMT :R173147 ?leukotoxin . } ?itqbisolate rdfs:label ?Isolate }&format=json&callback=?";
       formataColuna(query);
      }
 });
 });

function formataColuna(query){
  var array = query.split("SELECT");
  var string = array[1];
  var array2 = string.split("WHERE");
  var string2 = array2[0];
  str = string2.replace(/ /gi,"");
  str1 = str.replace(/\?/,"");
  var str2 = str1.split("?");
  executaQuery(query,str2);
  $("#loading").show(); 
  
}

 function executaQuery(json,header){
  var size = header.length;
  var table = "Quick Find: <input type='text' id='quickfind'><a id='cleanfilters' href='#'>Clear Filters</a><br><table id='results' class='tablesorter' border='0' cellpadding='0' cellspacing='1'><thead><tr>";
  $.each(header, function(i) {
   table += "<th>" + header[i] + "</th>";
  });
  table += "</tr></thead><tbody>";
   
  $.getJSON(json, function(data) {
   $.each(data, function(i, object){ 
    table += "<tr>";
    $.each(object, function(j, obj){ 
     table += "<td>" + obj + "</td>";
    });
    table += "</tr>";
   });  
   
  table += "</tbody>";
  table += "<tfoot><tr><td colspan=" + size + ">&nbsp;</td></tr></tfoot>";
  table += "</table>";
  
  $('#loading').hide();
  $('form').remove();
  $('#container').html(table);
  var options = {
                additionalFilterTriggers: [$('#quickfind')],
                clearFiltersControls: [$('#cleanfilters')]
            };
  $('#results').tableFilter(options);
  $('#results').tablesorter({widgets: ['zebra']});
  
 });
}

</script>
 </head>

 <body>
 <!-- start div "header" -->
<div id="header">
<a href="home.html">
<img id="goBack" src="images/back-icon.png" width="40" height="40"; align="left">
</a>
<a href="home.html">
<img id="home" src="images/m_Home.png">
</a>

<b><i>Staphylococcus aureus</i> Database</b>
</div> <!-- end div "header" -->

<br>

<!-- MENU -->
<div id="menu">
<ul class="menu">

  <script>  
  document.write("<li><a href='dataset.html?key="+key+"' title='DataSet'><span>Data Set</span></a></li>");
  document.write("<li><a href='storage.html?key="+key+"' title='VirtualREVCO'><span>Virtual REVCO</span></a></li>");
  document.write("<li><a href='query.html?key="+key+"' title='SPARQL'>SPARQL Queries</a></li>");
  document.write("<li><a href='ctab2x2.html?key="+key+"'>&nbsp;Two-way Contingency Table</a></li>");  
 </script>  
 
</ul>
</div>
<!-- End MENU -->

<br>

<!-- start div "export" -->
<div id ="icons" style="padding:10px align:right";>
<a href="#" onclick="$('#results').TableCSVExport();"><img src="images/excel.png" align="right" width="50" height="50"></a>

<a href="#"><img onclick="window.print();return false;" src="images/Print.png" align="right" width="50" height="50"></a>

</div><!-- end div "export" -->

<!-- start div "other Queries" -->
<div id ="icons" style="padding:10px align:left";>

 <script>  
  document.write("<a href='antibiogram.html?key="+key+"' onclick=''><img src='images/antibiogram.png' align='left' width='150' height='30'></a>");
 </script> 

</div><!-- end div "other Queries" -->

<!-- start div "title" -->
<div id="title">
<p><b>&nbsp;SPARQL Querying System for Toxins</b><p>
</div> <!-- end div "title" -->

<br>
<br>
<br>
<br>

<!-- start div container-->
<div id="container">

<!-- start query-->
<form action="" method="get" id="query"> 
<fieldset>
<legend><a id="myHeader7" href="javascript:toggle2('myContent7','myHeader7');"></a>&nbsp;Toxins</legend>
<div id="myContent7">

<h2>Simple Queries</h2>

<br>

<ul>
	<li>Enterotoxins&nbsp;<img id="img1" src="images/go.png"></li>
	<li>Exfoliatins&nbsp;<img id="img2" src="images/go.png"></li>
	<li>Hemolysins&nbsp;<img id="img3" src="images/go.png"></li>
	<li>Leukotoxins&nbsp;<img id="img4" src="images/go.png"></li>
</ul>

<br>
<br>

<h2>Advanced Query</h2>

<br>

	<ul>
	<li>Enterotoxins AND Exfoliatins AND Leukotoxins&nbsp;<img id="img5" src="images/go.png"></li>
	</ul>

<br>

</div>

<!-- end query-->

<br>

<div id="loading" style="display:none; position: center"></div>

</div>

<!-- start div "bottom" -->
<div id="bottom">
 <b>S3DB - Simple Sloppy Semantic Database </b>
 <br>
 <a href="http://www.s3db.org/">
 <img id="S3DB.org" src="images/link.png"/>
 </a>
 <a href="mailto:candida@itqb.unl.pt.com?Subject=Hello%20again">
 <img id="email" src="images/govdelivery_email_option.png" alt="mail" width="35" height="35" />
 </a>

 <a href="info.html">
 <img id="info" src="images/Information-icon.png" width="30" height="30" />
 </a>
</div> <!-- end div "bottom" -->


 </body>
</html>
